<template>
  <div class="warp container">
  	<div class="header">
      <div class="return-icon"></div>
      <div class="name">热门问题</div>
      <div></div>
    </div>


    <div class="problem">
    	<router-link :to="{path:'/feedback'}" class="problem-item">
    		<span class="feedback-icon"></span>
    		<span>我要反馈</span>
    	</router-link>
    	<h3>热门问题</h3>
    	<router-link :to="{path:'/answer/'+index}" class="problem-item" v-for="(item,index) in problemList">
    		<span>{{item.title}}</span>
    	</router-link>
    </div>



  </div>
</template>
<script>

    export default {
    	name: 'problem',
    	components: {

	    },
    	data () {
      		return {
      			problemList:[]
	      	}
	    },
	    created(){
			this.$axios.post(
              this.$store.state.url+"problem_list?device_sn="+this.$store.state.device,
              {device_sn:this.$store.state.device}).then(res=>{
                console.log(res.data);
                this.problemList = res.data.list;
          	});
	    },
	    mounted(){

	    },
	    methods:{
	      	back(){
	        	this.$router.go('-1')
	      	}
	    }
  	}
</script>
<style lang="scss" scoped>
	.problem{
		.problem-item{
			line-height:95px;
			padding:0 30px;
			color:#333;
			font-size:28px;
			position: relative;
			display: block;
			border-top:2px solid #d8d8d8;
			&:after{
				content:'';
				position: absolute;
				right:30px;
				top:50%;
				width:50px;
				height:50px;
				margin-top:-25px;
				background:url(../assets/images/icon/r-icon4.png) no-repeat 0 0/100% auto;
			}
			.feedback-icon{
				display: inline-block;
				vertical-align: middle;
				width:50px;
				height:50px;
				margin-right:10px;
				background:url(../assets/images/icon/feedback-icon.png) no-repeat 0 0/100% auto;
			}
		}
		h3{
			font-size:28px;
			color:#606060;
			padding:0 30px;
			background-color:#fafafa;
			line-height:95px;
		}
	}
</style>
